<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>10 模拟滑倒底部触发事件</title>
    <style>
        body{
            margin:0;
        }
        h3{
            position: fixed;
            width: 100%;
            text-align: center;
            color: #fff;
        }
        .content{
            background-color: #336699;
            height: 2000px;
        }
        .load-more{
            display: none;
        }
        .load-more p{
            text-align: center;
            cursor: pointer;
            color: #737373;
        }
    </style>

    <script src="../libs/jquery3_1_1.min.js" type="text/javascript"></script>
    <script>
        $(function () {
            $(document).scroll(scroll);
            scroll();
            function scroll() {
                if($(window).scrollTop()+$(window).height() == $('.content').height()){
                    $("h3").html("到底部了！！！");
                    if ($(".load-more").css("display") == "none") {
                        $(".load-more").show();
                        $(document).scrollTop($(document).height() - $(window).height());
                    }
                }else {
                    $("h3").html($(window).scrollTop()+$(window).height());
                }
            }
        });
    </script>
</head>
<body>
<h3></h3>
<div class="content"></div>
<div class="load-more">
    <p>加载更多</p>
</div>
</body>
</html>